<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米官网</title>
        <style type="text/css">
            body,html {
                padding: 0;
                margin: 0;
            }
            .wrapper {
                margin: 50px auto;
                width: 55px;
                height: 55px;
                transition: all 800ms;
                background-color: rgba(247, 122, 84, 0.85);
                background-image: url("https://s02.mifile.cn/assets/static/image/mi-logo.png"), url("https://s02.mifile.cn/assets/static/image/mi-home.png");
                background-repeat: no-repeat;
                background-size: 55px 55px ,55px 55px;
                background-position: -55px 0, 0 0;
            }
            .wrapper:hover {
                background-position: 0 0, 55px 0;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>